<template>
	<div id="item">
		<ul>
			<li v-for="(item,index) in list" :key="index"
				@click="$router.push('/assort/listdetailed/'+item.store_category_id)">
				<img :src="item.pic" alt="">
				<p>{{ item.cate_name }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				typeof: Array,
				default: []
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#item {
		width: 260 * $width;
		background-color: #fff;
		border-radius: 15 * $width;

		ul {
			display: flex;
			flex-wrap: wrap;
			padding: 10 * $width;

			li {
				width: 80 * $width;
				height: 83 * $width;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 5 * $width 0;

				img {
					min-width: 55 * $width;
					min-height: 55 * $width;
				}

				p {
					line-height: 40 * $width;
				}
			}
		}
	}
</style>
